<template>
    <!-- 我的学习卡 -->
    <div class="myStudyCardBox">
        <x-header :left-options="{showBack: true,backText:'我的学习卡'}" class="headerBox"></x-header>

        <router-link to class="cardBox firstCardBox">
            <img class="cardBg" src="../assets/images/overdue02.png"/>
            <div class="cardContent">
                <img class="cardContent_img1" src="../assets/images/overdue09.png"/>
<!--                <div>5张学习卡已过期</div>-->
                <img class="cardContent_img2" src="../assets/images/answer32.png"/>
            </div>
        </router-link>
        <swipeout>
            <swipeout-item
                    v-for="(item,index) in cardList" @on-close="handleEvents('on-close')" @on-open="handleEvents('on-open')"
                    transition-mode="follow" :key="index">
                <div v-if="false" slot="right-menu">
                    <swipeout-button class="deletBtn">删除</swipeout-button>
                </div>
                <router-link to="myStudyCardInfo" slot="content" class="demo-content cardBox">
                    <img v-if="false" class="cardBg" src="../assets/images/overdue04.png"/>
                    <div v-if="!false" style="height:100%">
                        <img  class="cardBg" src="../assets/images/overdue03.png"/>
<!--                        <img v-if="item.money==500" class="cardBg" src="../assets/images/overdue06.png"/>-->
<!--                        <img v-if="item.money==1000" class="cardBg" src="../assets/images/overdue05.png"/>-->
                    </div>
                    <div class="cardTitle">
                        <img src="../assets/images/overdue08.png"/>
                        <div>{{item.batchName}}</div>
                    </div>
                    <img v-if="false" src="../assets/images/overdue07.png" class="overdue"/>
                    <div class="cardMiddle">
                        <div>学习卡卡号</div>
                        <div>{{item.cardId}}</div>
                    </div>
                    <div class="cardBottom">
<!--                        <div>{{item.cardId}}</div>-->
                        <div>使用期限 {{item.startTime}} 至 {{item.endTimeTimeStr}}</div>
                    </div>
                </router-link>
            </swipeout-item>
        </swipeout>
        <div class="cardBox lastCardBox">
            <div class="lastCard_content">
                <img src="../assets/images/overdue10.png"/>
                <div>购买学习卡</div>
                <div>购买学习卡方便学习，享受优惠价格</div>
            </div>
        </div>
    </div>
</template>

<script>
    import {XHeader, Swipeout, SwipeoutItem, SwipeoutButton} from 'vux'
    import {myCard} from '@/api/index/study';
    import store from "../store/store";


    export default {
        components: {
            XHeader,
            Swipeout,
            SwipeoutItem,
            SwipeoutButton
        },
        data() {
            return {
                cardList: [
                    // {
                    //     title: '润禾教育网络学习卡',
                    //     cardNum: 'NO.16258485',
                    //     money: 200,
                    //     startTime: '2018/1/10',
                    //     endTime: '2019/1/10',
                    //     overdue: false,
                    // },
                    // {
                    //     title: '润禾教育网络学习卡',
                    //     cardNum: 'NO.16258485',
                    //     money: 500,
                    //     startTime: '2018/1/10',
                    //     endTime: '2019/1/10',
                    //     overdue: false,
                    // },
                    // {
                    //     title: '润禾教育网络学习卡',
                    //     cardNum: 'NO.16258485',
                    //     money: 1000,
                    //     startTime: '2018/1/10',
                    //     endTime: '2019/1/10',
                    //     overdue: false,
                    // },
                    // {
                    //     title: '润禾教育网络学习卡',
                    //     cardNum: 'NO.16258485',
                    //     money: 1000,
                    //     startTime: '2018/1/10',
                    //     endTime: '2019/1/10',
                    //     overdue: true,
                    // }
                ]
            }
        },
        created() {
            myCard(this.$store.state.user.id, this.$store.state.user.tenantId).then(res => {
                console.log(res.data.data);
                this.cardList = res.data.data.list;
            }).catch(err => {
                console.log(err)
            });


        },
        methods: {
            onButtonClick(type) {
                alert('on button click ' + type)
            },
            handleEvents(type) {
                console.log('event: ', type)
            }
        },
    }
</script>

<style lang="less" scoped>
    .myStudyCardBox {
        /deep/ .headerBox {
            background-color: #fff;
            border-bottom: 1px solid #eee;

            .vux-header-left {
                left: 24px;

                .vux-header-back {
                    color: #000;
                }

                .left-arrow:before {
                    border-color: #000;
                }
            }
        }

        // 卡片样式
        .cardBox {
            display: block;
            color: currentColor;
            width: 96%;
            height: 350px;
            margin: 0 auto;
            margin-top: 30px;
            margin-bottom: 34px;
            position: relative;
            border-radius: 30px;
            box-shadow: 0 10px 30px #d7d9dc;

            .cardBg {
                width: 100%;
                height: 100%;
            }

            .cardTitle {
                display: flex;
                position: absolute;
                top: 20px;
                left: 20px;
            }

            .cardTitle img {
                width: 35px;
                height: 35px;
                margin-right: 20px;
                margin-top: 5px;
            }

            .cardTitle div {
                color: #fff;
                font-size: 30px;
            }

            .cardMiddle {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: #fff;
                text-align: center;
            }

            .cardMiddle div:nth-child(1) {
                font-size: 28px;
            }

            .cardMiddle div:nth-child(2) {
                margin-top: 10px;
                font: 600 70px '微软雅黑';
            }

            .cardBottom {
                position: absolute;
                position: relative;
                left: 20px;
                bottom: 70px;
                color: #fff;
                font-size: 24px;
                display: flex;
            }

            .cardBottom div:nth-child(2) {
                position: absolute;
                bottom: 0;
                right: 40px;
            }

            .cardContent {
                width: 100%;
                box-sizing: border-box;
                padding: 0 30px;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .cardContent div {
                color: #f66450;
                font-size: 35px;
            }

            .cardContent_img1 {
                width: 50px;
                height: 50px;
                margin-right: 20px;
            }

            .cardContent_img2 {
                width: 30px;
                height: 30px;
                margin-left: auto;
            }

            .lastCard_content {
                text-align: center;
                margin-top: 50px;
            }

            .lastCard_content img {
                width: 120px;
                height: 120px;
            }

            .overdue {
                width: 97px;
                height: 97px;
                position: absolute;
                top: 30px;
                right: 30px;
            }

            .lastCard_content div:nth-child(2) {
                font: 600 35px '微软雅黑';
                margin: 10px 0;
            }

            .lastCard_content div:nth-child(3) {
                font-size: 30px;
                color: #999999;
            }
        }

        /* 第一张卡片样式 */

        .firstCardBox {
            height: 150px;
            box-shadow: none;
        }

        /* 最后一张卡片样式 */

        .lastCardBox {
            margin-bottom: 30px;
            border: 1px solid #ffd6d6;
            border-radius: 30px;
        }

        .deletBtn {
            border-radius: 20px;
            background-color: #ff9300;
        }
    }
</style>